<template>
  <view class="course-container" v-if="inited">
    <navbar :title="product.title"></navbar>
<!--    <view style="margin-bottom: 30rpx;padding-left:30rpx;height: 66rpx;background-color: #FDE6C6;color: #FD2242;display: flex;align-items: center;">-->
<!--      将小程序添加到桌面，再也不怕找不到入口啦-->
<!--      <view class="f1"></view>-->
<!--      <view style="background-color: #0D94FF;height: 50rpx;color: #fff;padding: 0 30rpx;margin-right: 30rpx;display: flex;justify-content: center;align-items: center">添加</view>-->
<!--    </view>-->
    <view class="block-container2" @click="toLianxi">
      <view class="btn"></view>
    </view>
    <view class="block-container3" @click="toKaoshi">
      <view class="btn"></view>
    </view>
    <view class="block-container4" @click="toVideo(1)" v-if="kemu1Chapter">
      <view class="pic" :style="{'background-image': styleBgImageUrl(kemu1Chapter.coverUrl)}">
        <view class="bofang"></view>
      </view>
      <view class="flex v f1">
        <view class="label">{{ kemu1Chapter.titleStr }}</view>
        <view class="f1"></view>
        <view class="btn">去观看</view>
      </view>
    </view>
    <view class="result-container">
      <view class="tab-container">
        <view :class="['tab', selected===1?'selected':'']" @click="selected=1">
          <text>科一</text>
          <image src="../../static/bj@3x.png" mode="heightFix" class="icon" v-if="selected===1"></image>
        </view>
        <view :class="['tab', selected===4?'selected':'']" @click="selected=4">
          <text>科四</text>
          <image src="../../static/bj@3x.png" mode="heightFix" class="icon" v-if="selected===4"></image>
        </view>
      </view>
      <view class="body">
        <view class="item" @click="toExamResult">
          <text class="count-text">{{ kaoshiCount }}</text>
          <text class="label">考试次数</text>
        </view>
        <view class="item" @click="toExamResult">
          <text class="count-text">{{ kaoshiSuccessCount }}</text>
          <text class="label">合格次数</text>
          <text class="success">90分合格</text>
        </view>
      </view>
    </view>
    <view class="mine-btn-container">
      <view class="mine-btn" @click="goTo('mine_wrong')">
        <view class="flex v f1">
          <text>我的错题</text>
          <text class="count-text">{{ wrongTotalCount }}题</text>
        </view>
        <image src="@/static/icon_cuoti@3x.png" mode="widthFix" class="mine-btn-icon"></image>
      </view>
      <view class="mine-btn" @click="goTo('mine_collect')">
        <view class="flex v f1">
          <text>我的收藏</text>
          <text class="count-text">{{ collectTotalCount }}题</text>
        </view>
        <image src="@/static/icon_shoucang@3x.png" mode="widthFix" class="mine-btn-icon"></image>
      </view>
    </view>
    <view class="block-container chapters-container">
      <view class="label-container">
        <view class="label f1">课程信息</view>
<!--        <view class="sub-label">共{{ jointCount }}节</view>-->
      </view>
      <view v-for="joint in joints" :key="joint.id">
        <view class="joint-item" @click="toDetail(joint)">
          <view :class="['joint-type', 'joint-type-' + joint.type]"></view>
          <view class="joint-label">{{ joint.title }}</view>
        </view>
        <view class="divider"></view>
      </view>
    </view>
    <view style="height: 200rpx"></view>
  </view>
</template>

<script>
import {orderApi} from "@/api";
import fanzhishiApi from "../../fanzhishiApi";
import {mapActions, mapGetters} from 'vuex'
import Navbar from "../../components/navbar.vue";
import fanzhishiUtils from "../../libs/fanzhishiUtils";
import utils, {styleBgImageUrl} from "../../libs/utils";

export default {
  components: {Navbar},
  data() {
    return {
      inited: false,
      order: {
        productId: 6
      },
      selected: 1,
      product: null,
      teacher: null,
      chapters: [],
      joints: [],
      openIndex: 0,
      jointCount: null,
      kemu1Chapter: null,
    }
  },
  computed: {
    ...mapGetters('question', ['kemu1', 'kemu4']),
    wrongTotalCount() {
      return this.kemu1.wrongTotalCount + this.kemu4.wrongTotalCount
    },
    collectTotalCount() {
      return this.kemu1.collectTotalCount + this.kemu4.collectTotalCount
    },
    kaoshiCount() {
      if (this.selected === 1)
        return this.kemu1.kaoshiCount
      return this.kemu4.kaoshiCount
    },
    kaoshiSuccessCount() {
      if (this.selected === 1)
        return this.kemu1.kaoshiSuccessCount
      return this.kemu4.kaoshiSuccessCount
    },
  },
  async onLoad({order_id, product_id}) {
    try {
      // #ifdef H5
      fanzhishiUtils.setOrderId('DY97302683992891689058393761')
      await this.initProduct(product_id)
      // #endif

      // #ifndef H5
      await this.initOrder(order_id)
      await this.initProduct(this.order.productId)
      // #endif
      utils.updateUserInfo()
      this.inited = true
      this.fanzhishiOpenVIP()
    } catch (e) {
      uni.showModal({
        title: '课程异常',
        content: e.data.msg,
        success: ({confirm}) => {
          uni.navigateBack()
        }
      })
    }
  },
  methods: {
    ...mapActions(['fanzhishiOpenVIP', 'setKemu1', 'setKemu2', 'setKemu3']),
    styleBgImageUrl,
    toExamResult() {
      uni.navigateTo({
        url: '/pages/exam_result/exam_result?kemu=' + this.selected,
      });
    },
    async initOrder(id) {
      const res = await orderApi.info(id)
      this.order = res.data.data
      fanzhishiUtils.setOrderId(id)
    },
    async initProduct(productId) {
      const res = await fanzhishiApi.productInfo(productId)
      this.product = res.data.data.product
      this.teacher = res.data.data.teacher

      let jointCount = 0
      const chapters = []
      res.data.data.chapters.map(chapter => {
        if (chapter.kemu === 5) {
          jointCount += chapter.joints.length
          this.joints = chapter.joints
        } else if (chapter.kemu === 1) {
          this.kemu1Chapter = chapter
          this.setKemu1(chapter.joints)
        } else if (chapter.kemu === 2) {
          this.setKemu2(chapter.joints)
        } else if (chapter.kemu === 3) {
          this.setKemu3(chapter.joints)
        }
      })
      this.chapters = chapters
      this.jointCount = jointCount
    },
    toLianxi() {
      uni.navigateTo({
        url: '/pages/course_home/course_home'
      })
    },
    toKaoshi() {
      uni.navigateTo({
        url: '/pages/kaochang_moni_enter/kaochang_moni_enter?kemu=1'
      })
    },
    toVideo(kemu) {
      uni.navigateTo({
        url: '/pages/course_video/course_video?kemu=' + kemu
      })
    },
    openChapter(i) {
      if (this.openIndex === i) {
        this.openIndex = -1
      } else {
        this.openIndex = i
      }
    },
    goTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/${page}`,
      });
    },
    toDetail(joint) {
      console.log(joint)
      uni.navigateTo({
        url: '/pages/joint_detail/joint_detail?id=' + joint.id
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}
.course-container {
  padding-top: 1px;
  .mine-btn-container {
    display: flex;
    margin: 30rpx;
    margin-top: 0;

    .mine-btn-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .mine-btn {
      flex: 1;
      background-color: #fff;
      border-radius: 20rpx;
      margin-left: 30rpx;
      padding: 30rpx;
      display: flex;
      font-weight: 500;
      font-size: 15px;

      &:first-child {
        margin-left: 0;
      }

      .count-text {
        color: #999;
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
  .result-container {
    margin: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 0;
    overflow: hidden;

    .tab-container {
      background-color: #3073f6;
      display: flex;
      color: #fff;
      font-size: 30rpx;

      .tab {
        height: 80rpx;
        line-height: 80rpx;
        width: 160rpx;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 40rpx;

        &.selected {
          color: #000;
        }

        text {
          z-index: 2;
          text-align: center;
          position: absolute;
        }

        .icon {
          height: 86rpx;
          width: 240rpx;
          position: absolute;
          left: -40rpx;
          top: 0;
          z-index: 1;
        }
      }
    }

    .body {
      padding: 30rpx;
      display: flex;
      position: relative;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-bg {
          width: 244rpx;
          height: 172rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .count-text {
          font-size: 50rpx;
          z-index: 1;
        }

        .title {
          font-size: 28rpx;
        }

        .success {
          font-size: 20rpx;
          color: #999;
          margin-top: 10rpx;
        }

        .vip-text {
          color: #C7AD7A;
          margin-bottom: 10rpx;
          z-index: 1;
        }

        .vip-btn {
          margin-top: 20rpx;
          color: #222832;
          background-color: #e3c898;
          font-size: 26rpx;
          padding: 15rpx 35rpx;
          border-radius: 40rpx;
          z-index: 1;
        }
      }
    }
  }

  .block-container2 {
    width: 690rpx;
    height: 284rpx;
    background-image: url("http://down.qwdata.vip/app_icon/1689063520069");
    background-size: contain;
    margin: 30rpx;
    margin-top: 0;
    background-repeat: no-repeat;
    position: relative;

    .btn {
      position: absolute;
      width: 180rpx;
      height: 62rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      border-radius: 32rpx;
      bottom: 40rpx;
      left: 40rpx;
    }
  }

  .block-container4 {
    width: 690rpx;
    height: 284rpx;
    padding: 40rpx;
    box-sizing: border-box;
    background-image: linear-gradient(92deg, #FFE8E4 0%, #FFEDE9 43%, #FFF7F3 100%);
    background-size: contain;
    margin: 30rpx;
    border-radius: 24rpx;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    .pic {
      width: 352rpx;
      height: 204rpx;
      border-radius: 24rpx;
      border: 3px solid #fff;
      margin-right: 30rpx;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .bofang {
        background-image: url("http://down.qwdata.vip/app_icon/1689063074661");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 72rpx;
        height: 72rpx;
      }
    }
    .label {
      font-size: 16px;
      color: #48110D;
      font-weight: bold;
      line-height: 24px;
      margin-top: 20rpx;
    }
    .btn {
      width: 180rpx;
      height: 62rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #fff;
      background-color: #FD6144;
      border-radius: 32rpx;
    }
  }

  .block-container3 {
    width: 690rpx;
    height: 284rpx;
    background-image: url("http://down.qwdata.vip/app_icon/1689063524508");
    background-size: contain;
    margin: 30rpx;
    background-repeat: no-repeat;
    position: relative;

    .btn {
      position: absolute;
      width: 180rpx;
      height: 62rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      border-radius: 32rpx;
      bottom: 40rpx;
      left: 40rpx;
    }
  }

  .block-container {
    padding-top: 1px;
    padding-bottom: 1px;
    width: 750rpx;
    background-color: #fff;
    margin-top: 20rpx;

    .label {
      font-size: 18px;
      color: #000;
      font-weight: bold;
      margin: 30rpx;
    }
  }

  .chapters-container {
    .label-container {
      display: flex;
      align-items: baseline;
      padding-right: 30rpx;

      .label {
        margin-bottom: 10rpx;
      }

      .sub-label {
        font-size: 14px;
        color: #AAA9B3;
      }
    }
  }

  .joint-item {
    position: relative;
    margin: 30rpx;
    height: 90rpx;
    background-color: #F7F7F9;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    .joint-label {
      font-size: 15px;
      color: #090D14;
    }
    .joint-type {
      margin-right: 15rpx;
      width: 32rpx;
      height: 40rpx;
      background-size: contain;
      background-repeat: no-repeat;
      display: inline-block;
      &.joint-type-2 {
        background-image: url("http://down.qwdata.vip/app_icon/1689063528980")
      }
      &.joint-type-1 {
        background-image: url("http://down.qwdata.vip/app_icon/1689064172455")
      }
    }
  }

  .chapter-container {
    .divider {
      margin-left: 30rpx;
      margin-right: 30rpx;
      border-top: 1px solid #ededed;
    }


    .chapter-item {
      padding: 0 30rpx;
      height: 157rpx;
      padding-top: 1px;
      position: relative;

      .arrow {
        width: 12rpx;
        height: 24rpx;
        position: absolute;
        right: 30rpx;
        top: 70rpx;

        &.open {
          transform: rotate(90deg);
        }
      }

      .lock {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 30rpx;
        top: 70rpx;
      }
      .chapter-label {
        margin-top: 30rpx;
        font-size: 15px;
        color: #21262D;
        font-weight: bold;
      }

      .chapter-desc {
        font-size: 13px;
        color: #AAA9B3;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
